<template>
  <div style="display: flex; flex-direction: column">
    <div
      style="
        width: 350px;
        background: red;
        color: white;
        height: 20px;
        text-align: center;
        line-height: 20px;
        padding: 5px 0;
      "
    >
      串口通讯
    </div>
    <div
      style="
        width: 100%;
        display: flex;
        flex-direction: column;
        height: 280px;
        align-items: center;
        justify-content: space-around;
         background: black;
        color:white;
      "
    >
    <div style="display: flex; align-items: center;height:30px;">
        <div style="width: 100px">延时</div>
        <div
          type="text"
          disabled
          style="
            width: 100px;
            height: 20px;
           background:grey;overflow:hidden;
          "
         
        >{{delay}}</div>
      </div>
      <div style="display: flex; align-items: center">
        <div style="width: 100px">串口编号</div>
        <div
          type="text"
          disabled
          style="
            width: 100px;
            height: 20px;
           background:grey;overflow:hidden;
          "
          
        >{{serialNumber}}</div>
      </div>
      <div style="display: flex; align-items: center">
        <div style="width: 100px">波特率</div>
        <div
          type="text"
          disabled
          style="
            width: 100px;
            height: 20px;
           background:grey;overflow:hidden;
          "
         
        >{{baudRate}}</div>
      </div>
      <div style="display: flex; align-items: center">
        <div style="width: 100px">数据位</div>
        <div
          type="text"
          disabled
          style="
            width: 100px;
            height: 20px;
           background:grey;overflow:hidden;
          "
        
        >{{dataBits}}</div>
      </div>
      <div style="display: flex; align-items: center">
        <div style="width: 100px">停止位</div>
        <div
          type="text"
          disabled
          style="
            width: 100px;
            height: 20px;
           background:grey;overflow:hidden;
          "
        
        >{{stopBits}}</div>
      </div>
      <div style="display: flex; align-items: center">
        <div style="width: 100px">校验位</div>
        <div
          type="text"
          disabled
          style="
            width: 100px;
            height: 20px;
           background:grey;overflow:hidden;
          "
         
        >{{parityBits}}</div>
      </div>
      <div style="display: flex; align-items: center">
        <div style="width: 100px">指令数据</div>
        <div
          type="text"
          disabled
          style="
            width: 100px;
            height: 20px;
           background:grey;overflow:hidden;
          "
         
        >{{instructionData}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SerialCommunication",
  inject: ["getNode"],
  data() {
    return {
      serialNumber: null,
      baudRate: null,
      dataBits: null,
      stopBits: null,
      parityBits: null,
      instructionData: null,
      eventType: 6,
      delay:0
    };
  },
  mounted() {
    const self = this;
    const node = this.getNode();
    node.on("change:data", ({ current }) => {
      
      if (current === undefined) {
        self.serialNumber = null;
        self.baudRate = null;
        self.dataBits = null;
        self.stopBits = null;
        self.parityBits = null;
        self.instructionData = null;
        self.delay = 0;
        return;
      }
      self.serialNumber = current.serialNumber;
      self.baudRate = current.baudRate;
      self.dataBits = current.dataBits;
      self.stopBits = current.stopBits;
      self.parityBits = current.parityBits;
      self.instructionData = current.instructionData;
      self.delay = current.delay
    });
  },
};
</script>

<style>
</style>